<template>
  <div class="retail-statistics-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>零售统计</h2>
      <p>零售业务数据统计分析，包括销售额、客流量、转化率等关键指标</p>
    </div>

    <!-- 时间筛选器 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="filterForm" :inline="true" class="filter-form">
        <el-form-item label="统计周期">
          <el-select v-model="filterForm.period" @change="handlePeriodChange" style="width: 150px">
            <el-option label="今日" value="today" />
            <el-option label="昨日" value="yesterday" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
            <el-option label="本季度" value="quarter" />
            <el-option label="本年" value="year" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" v-if="filterForm.period === 'custom'">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="门店">
          <el-select v-model="filterForm.storeId" @change="handleStoreChange" style="width: 200px">
            <el-option label="全部门店" value="" />
            <el-option label="总店" value="1" />
            <el-option label="分店A" value="2" />
            <el-option label="分店B" value="3" />
            <el-option label="分店C" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button type="info" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 核心指标卡片 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :span="6">
        <el-card class="metric-card sales-card">
          <div class="metric-content">
            <div class="metric-icon">
              <el-icon size="32" color="#409EFF"><Money /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">¥{{ formatNumber(coreMetrics.totalSales) }}</div>
              <div class="metric-label">总销售额</div>
              <div class="metric-trend" :class="coreMetrics.salesTrend >= 0 ? 'positive' : 'negative'">
                <el-icon><TrendCharts /></el-icon>
                {{ coreMetrics.salesTrend >= 0 ? '+' : '' }}{{ coreMetrics.salesTrend }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card orders-card">
          <div class="metric-content">
            <div class="metric-icon">
              <el-icon size="32" color="#67C23A"><ShoppingCart /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">{{ formatNumber(coreMetrics.totalOrders) }}</div>
              <div class="metric-label">订单数量</div>
              <div class="metric-trend" :class="coreMetrics.ordersTrend >= 0 ? 'positive' : 'negative'">
                <el-icon><TrendCharts /></el-icon>
                {{ coreMetrics.ordersTrend >= 0 ? '+' : '' }}{{ coreMetrics.ordersTrend }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card traffic-card">
          <div class="metric-content">
            <div class="metric-icon">
              <el-icon size="32" color="#E6A23C"><User /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">{{ formatNumber(coreMetrics.totalVisitors) }}</div>
              <div class="metric-label">客流量</div>
              <div class="metric-trend" :class="coreMetrics.trafficTrend >= 0 ? 'positive' : 'negative'">
                <el-icon><TrendCharts /></el-icon>
                {{ coreMetrics.trafficTrend >= 0 ? '+' : '' }}{{ coreMetrics.trafficTrend }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card conversion-card">
          <div class="metric-content">
            <div class="metric-icon">
              <el-icon size="32" color="#F56C6C"><Promotion /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">{{ coreMetrics.conversionRate }}%</div>
              <div class="metric-label">转化率</div>
              <div class="metric-trend" :class="coreMetrics.conversionTrend >= 0 ? 'positive' : 'negative'">
                <el-icon><TrendCharts /></el-icon>
                {{ coreMetrics.conversionTrend >= 0 ? '+' : '' }}{{ coreMetrics.conversionTrend }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 销售趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="chart-header">
              <span>销售趋势</span>
              <el-radio-group v-model="salesChartType" size="small" @change="updateSalesChart">
                <el-radio-button label="amount">销售额</el-radio-button>
                <el-radio-button label="orders">订单量</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="salesTrendChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
      
      <!-- 渠道分析图 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>渠道分析</span>
          </template>
          <div ref="channelChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <!-- 商品销售排行 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>商品销售排行</span>
          </template>
          <div ref="productRankChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
      
      <!-- 客户分析 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>客户分析</span>
          </template>
          <div ref="customerChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="table-header">
          <span>详细数据</span>
          <el-tabs v-model="activeTableTab" @tab-change="handleTableTabChange">
            <el-tab-pane label="销售明细" name="sales" />
            <el-tab-pane label="商品统计" name="products" />
            <el-tab-pane label="客户统计" name="customers" />
            <el-tab-pane label="门店对比" name="stores" />
          </el-tabs>
        </div>
      </template>
      
      <!-- 销售明细表 -->
      <div v-show="activeTableTab === 'sales'">
        <el-table :data="salesDetailData" v-loading="tableLoading" stripe border>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="orderCount" label="订单数" width="100">
            <template #default="{ row }">
              <span class="order-count">{{ row.orderCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="salesAmount" label="销售额" width="120">
            <template #default="{ row }">
              <span class="sales-amount">¥{{ row.salesAmount.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="avgOrderValue" label="客单价" width="120">
            <template #default="{ row }">
              <span class="avg-order-value">¥{{ row.avgOrderValue.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="visitors" label="客流量" width="100" />
          <el-table-column prop="conversionRate" label="转化率" width="100">
            <template #default="{ row }">
              <span class="conversion-rate">{{ row.conversionRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="refundAmount" label="退款金额" width="120">
            <template #default="{ row }">
              <span class="refund-amount">¥{{ row.refundAmount.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="profit" label="利润" width="120">
            <template #default="{ row }">
              <span class="profit" :class="row.profit >= 0 ? 'positive' : 'negative'">
                ¥{{ row.profit.toFixed(2) }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 商品统计表 -->
      <div v-show="activeTableTab === 'products'">
        <el-table :data="productStatsData" v-loading="tableLoading" stripe border>
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="productName" label="商品名称" width="200" show-overflow-tooltip />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="salesQuantity" label="销量" width="100">
            <template #default="{ row }">
              <span class="sales-quantity">{{ row.salesQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="salesAmount" label="销售额" width="120">
            <template #default="{ row }">
              <span class="sales-amount">¥{{ row.salesAmount.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="profit" label="利润" width="120">
            <template #default="{ row }">
              <span class="profit">¥{{ row.profit.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="profitMargin" label="利润率" width="100">
            <template #default="{ row }">
              <span class="profit-margin">{{ row.profitMargin }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="库存" width="100" />
        </el-table>
      </div>
      
      <!-- 客户统计表 -->
      <div v-show="activeTableTab === 'customers'">
        <el-table :data="customerStatsData" v-loading="tableLoading" stripe border>
          <el-table-column prop="customerLevel" label="客户等级" width="120" />
          <el-table-column prop="customerCount" label="客户数量" width="120" />
          <el-table-column prop="totalSpent" label="消费总额" width="120">
            <template #default="{ row }">
              <span class="total-spent">¥{{ row.totalSpent.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="avgSpent" label="平均消费" width="120">
            <template #default="{ row }">
              <span class="avg-spent">¥{{ row.avgSpent.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderCount" label="订单数量" width="120" />
          <el-table-column prop="avgOrderValue" label="客单价" width="120">
            <template #default="{ row }">
              <span class="avg-order-value">¥{{ row.avgOrderValue.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="repurchaseRate" label="复购率" width="100">
            <template #default="{ row }">
              <span class="repurchase-rate">{{ row.repurchaseRate }}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 门店对比表 -->
      <div v-show="activeTableTab === 'stores'">
        <el-table :data="storeCompareData" v-loading="tableLoading" stripe border>
          <el-table-column prop="storeName" label="门店名称" width="150" />
          <el-table-column prop="salesAmount" label="销售额" width="120">
            <template #default="{ row }">
              <span class="sales-amount">¥{{ row.salesAmount.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderCount" label="订单数" width="100" />
          <el-table-column prop="visitors" label="客流量" width="100" />
          <el-table-column prop="conversionRate" label="转化率" width="100">
            <template #default="{ row }">
              <span class="conversion-rate">{{ row.conversionRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="avgOrderValue" label="客单价" width="120">
            <template #default="{ row }">
              <span class="avg-order-value">¥{{ row.avgOrderValue.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="profit" label="利润" width="120">
            <template #default="{ row }">
              <span class="profit">¥{{ row.profit.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="growth" label="增长率" width="100">
            <template #default="{ row }">
              <span class="growth" :class="row.growth >= 0 ? 'positive' : 'negative'">
                {{ row.growth >= 0 ? '+' : '' }}{{ row.growth }}%
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Download, Money, ShoppingCart, User, Promotion, TrendCharts } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const tableLoading = ref(false)
const salesChartType = ref('amount')
const activeTableTab = ref('sales')

// 图表引用
const salesTrendChart = ref(null)
const channelChart = ref(null)
const productRankChart = ref(null)
const customerChart = ref(null)

// 筛选表单
const filterForm = reactive({
  period: 'today',
  dateRange: [],
  storeId: ''
})

// 核心指标数据
const coreMetrics = reactive({
  totalSales: 1256800.50,
  salesTrend: 12.5,
  totalOrders: 3580,
  ordersTrend: 8.3,
  totalVisitors: 15680,
  trafficTrend: -2.1,
  conversionRate: 22.8,
  conversionTrend: 5.2
})

// 销售明细数据
const salesDetailData = ref([
  {
    date: '2024-01-20',
    orderCount: 156,
    salesAmount: 45600.00,
    avgOrderValue: 292.31,
    visitors: 680,
    conversionRate: 22.9,
    refundAmount: 1200.00,
    profit: 9120.00
  },
  {
    date: '2024-01-19',
    orderCount: 142,
    salesAmount: 38900.00,
    avgOrderValue: 273.94,
    visitors: 620,
    conversionRate: 22.9,
    refundAmount: 800.00,
    profit: 7780.00
  },
  {
    date: '2024-01-18',
    orderCount: 168,
    salesAmount: 52300.00,
    avgOrderValue: 311.31,
    visitors: 750,
    conversionRate: 22.4,
    refundAmount: 1500.00,
    profit: 10460.00
  },
  {
    date: '2024-01-17',
    orderCount: 134,
    salesAmount: 35600.00,
    avgOrderValue: 265.67,
    visitors: 580,
    conversionRate: 23.1,
    refundAmount: 600.00,
    profit: 7120.00
  },
  {
    date: '2024-01-16',
    orderCount: 189,
    salesAmount: 58900.00,
    avgOrderValue: 311.64,
    visitors: 820,
    conversionRate: 23.0,
    refundAmount: 2100.00,
    profit: 11780.00
  }
])

// 商品统计数据
const productStatsData = ref([
  {
    rank: 1,
    productName: 'iPhone 15 Pro',
    category: '电子产品',
    salesQuantity: 85,
    salesAmount: 85000.00,
    profit: 17000.00,
    profitMargin: 20.0,
    inventory: 45
  },
  {
    rank: 2,
    productName: 'MacBook Air',
    category: '电子产品',
    salesQuantity: 32,
    salesAmount: 64000.00,
    profit: 12800.00,
    profitMargin: 20.0,
    inventory: 18
  },
  {
    rank: 3,
    productName: 'AirPods Pro',
    category: '电子产品',
    salesQuantity: 156,
    salesAmount: 31200.00,
    profit: 6240.00,
    profitMargin: 20.0,
    inventory: 89
  },
  {
    rank: 4,
    productName: '智能手表',
    category: '电子产品',
    salesQuantity: 78,
    salesAmount: 23400.00,
    profit: 4680.00,
    profitMargin: 20.0,
    inventory: 56
  },
  {
    rank: 5,
    productName: '无线充电器',
    category: '电子产品',
    salesQuantity: 234,
    salesAmount: 14040.00,
    profit: 2808.00,
    profitMargin: 20.0,
    inventory: 123
  }
])

// 客户统计数据
const customerStatsData = ref([
  {
    customerLevel: 'VIP客户',
    customerCount: 156,
    totalSpent: 456800.00,
    avgSpent: 2928.21,
    orderCount: 680,
    avgOrderValue: 671.76,
    repurchaseRate: 85.2
  },
  {
    customerLevel: '金牌客户',
    customerCount: 289,
    totalSpent: 345600.00,
    avgSpent: 1195.50,
    orderCount: 1156,
    avgOrderValue: 298.96,
    repurchaseRate: 72.8
  },
  {
    customerLevel: '银牌客户',
    customerCount: 456,
    totalSpent: 234500.00,
    avgSpent: 514.25,
    orderCount: 1580,
    avgOrderValue: 148.42,
    repurchaseRate: 58.6
  },
  {
    customerLevel: '普通客户',
    customerCount: 1280,
    totalSpent: 189600.00,
    avgSpent: 148.13,
    orderCount: 2890,
    avgOrderValue: 65.61,
    repurchaseRate: 32.4
  }
])

// 门店对比数据
const storeCompareData = ref([
  {
    storeName: '总店',
    salesAmount: 456800.00,
    orderCount: 1580,
    visitors: 6800,
    conversionRate: 23.2,
    avgOrderValue: 289.11,
    profit: 91360.00,
    growth: 12.5
  },
  {
    storeName: '分店A',
    salesAmount: 345600.00,
    orderCount: 1156,
    visitors: 5200,
    conversionRate: 22.2,
    avgOrderValue: 298.96,
    profit: 69120.00,
    growth: 8.3
  },
  {
    storeName: '分店B',
    salesAmount: 289500.00,
    orderCount: 980,
    visitors: 4500,
    conversionRate: 21.8,
    avgOrderValue: 295.41,
    profit: 57900.00,
    growth: -2.1
  },
  {
    storeName: '分店C',
    salesAmount: 165900.00,
    orderCount: 680,
    visitors: 3180,
    conversionRate: 21.4,
    avgOrderValue: 243.97,
    profit: 33180.00,
    growth: 15.8
  }
])

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toLocaleString()
}

// 周期变化处理
const handlePeriodChange = (period) => {
  if (period !== 'custom') {
    filterForm.dateRange = []
  }
  loadData()
}

// 日期变化处理
const handleDateChange = () => {
  loadData()
}

// 门店变化处理
const handleStoreChange = () => {
  loadData()
}

// 刷新数据
const handleRefresh = () => {
  loadData()
  ElMessage.success('数据已刷新')
}

// 导出报表
const handleExport = () => {
  ElMessage.success('导出功能开发中...')
}

// 更新销售趋势图
const updateSalesChart = () => {
  renderSalesTrendChart()
}

// 表格标签页变化
const handleTableTabChange = (tabName) => {
  activeTableTab.value = tabName
  loadTableData(tabName)
}

// 渲染销售趋势图
const renderSalesTrendChart = () => {
  if (!salesTrendChart.value) return
  
  const chart = echarts.init(salesTrendChart.value)
  const dates = ['01-16', '01-17', '01-18', '01-19', '01-20']
  const salesData = [58900, 35600, 52300, 38900, 45600]
  const ordersData = [189, 134, 168, 142, 156]
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: salesChartType.value === 'amount' ? ['销售额'] : ['订单量']
    },
    xAxis: {
      type: 'category',
      data: dates
    },
    yAxis: {
      type: 'value',
      name: salesChartType.value === 'amount' ? '金额(元)' : '数量(单)'
    },
    series: [{
      name: salesChartType.value === 'amount' ? '销售额' : '订单量',
      type: 'line',
      data: salesChartType.value === 'amount' ? salesData : ordersData,
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(64, 158, 255, 0.3)'
          }, {
            offset: 1, color: 'rgba(64, 158, 255, 0.1)'
          }]
        }
      }
    }]
  }
  
  chart.setOption(option)
}

// 渲染渠道分析图
const renderChannelChart = () => {
  if (!channelChart.value) return
  
  const chart = echarts.init(channelChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '销售渠道',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 456800, name: '线下门店' },
        { value: 345600, name: '线上商城' },
        { value: 234500, name: '微信小程序' },
        { value: 189600, name: '第三方平台' }
      ]
    }]
  }
  
  chart.setOption(option)
}

// 渲染商品排行图
const renderProductRankChart = () => {
  if (!productRankChart.value) return
  
  const chart = echarts.init(productRankChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['无线充电器', '智能手表', 'AirPods Pro', 'MacBook Air', 'iPhone 15 Pro']
    },
    series: [{
      name: '销售额',
      type: 'bar',
      data: [14040, 23400, 31200, 64000, 85000],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#67C23A'
          }, {
            offset: 1, color: '#85CE61'
          }]
        }
      }
    }]
  }
  
  chart.setOption(option)
}

// 渲染客户分析图
const renderCustomerChart = () => {
  if (!customerChart.value) return
  
  const chart = echarts.init(customerChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['客户数量', '平均消费']
    },
    xAxis: {
      type: 'category',
      data: ['普通客户', '银牌客户', '金牌客户', 'VIP客户']
    },
    yAxis: [{
      type: 'value',
      name: '客户数量',
      position: 'left'
    }, {
      type: 'value',
      name: '平均消费(元)',
      position: 'right'
    }],
    series: [{
      name: '客户数量',
      type: 'bar',
      data: [1280, 456, 289, 156],
      itemStyle: {
        color: '#E6A23C'
      }
    }, {
      name: '平均消费',
      type: 'line',
      yAxisIndex: 1,
      data: [148.13, 514.25, 1195.50, 2928.21],
      itemStyle: {
        color: '#F56C6C'
      }
    }]
  }
  
  chart.setOption(option)
}

// 渲染所有图表
const renderAllCharts = () => {
  nextTick(() => {
    renderSalesTrendChart()
    renderChannelChart()
    renderProductRankChart()
    renderCustomerChart()
  })
}

// 加载表格数据
const loadTableData = (tabName) => {
  tableLoading.value = true
  setTimeout(() => {
    tableLoading.value = false
  }, 500)
}

// 加载数据
const loadData = () => {
  // 模拟数据加载
  setTimeout(() => {
    renderAllCharts()
  }, 100)
}

// 组件挂载时初始化
onMounted(() => {
  loadData()
  loadTableData('sales')
})
</script>

<style scoped>
.retail-statistics-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 0;
}

.metrics-row {
  margin-bottom: 20px;
}

.metric-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.metric-icon {
  margin-right: 15px;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.metric-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.metric-trend.positive {
  color: #67C23A;
}

.metric-trend.negative {
  color: #F56C6C;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-count,
.sales-quantity {
  color: #409EFF;
  font-weight: 600;
}

.sales-amount,
.total-spent,
.avg-spent,
.avg-order-value {
  color: #67C23A;
  font-weight: 600;
}

.conversion-rate,
.repurchase-rate,
.profit-margin {
  color: #E6A23C;
  font-weight: 600;
}

.refund-amount {
  color: #F56C6C;
  font-weight: 600;
}

.profit.positive,
.growth.positive {
  color: #67C23A;
  font-weight: 600;
}

.profit.negative,
.growth.negative {
  color: #F56C6C;
  font-weight: 600;
}

.profit {
  font-weight: 600;
}

@media (max-width: 768px) {
  .retail-statistics-container {
    padding: 10px;
  }
  
  .metrics-row {
    flex-direction: column;
  }
  
  .charts-row {
    flex-direction: column;
  }
  
  .filter-form {
    flex-direction: column;
  }
  
  .metric-value {
    font-size: 20px;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .table-header {
    flex-direction: column;
    gap: 10px;
  }
}
</style>